const express = require('express')
const fs = require('fs')
const { createBundleRenderer } = require('vue-server-renderer')
const setupDevServer = require('./build/setup-dev-server')

const server = express()

// 开放静态文件 物理磁盘资源文件  在开发环境下应该找到内存中的资源文件
server.use('/dist', express.static('./dist'))

const isProd = process.env.NODE_ENV === 'production'

let renderer
let onReady
if (isProd) {
    // 生产模式
    const serverBundle = require('./dist/vue-ssr-server-bundle.json')
    const template = fs.readFileSync('./index.template.html', 'utf-8')
    const clientManifest = require('./dist/vue-ssr-client-manifest.json')
    renderer = createBundleRenderer(serverBundle, {
        template,
        clientManifest
    })
} else {
    // 开发模式 -> 监视文件自动打包构建 -> 重新生成 Renderer 渲染器
    onReady = setupDevServer(server, (serverBundle, template, clientManifest) => {
        renderer = createBundleRenderer(serverBundle, {
            template,
            clientManifest
        })
    })
}

const render = async (req, res) => {
    
    try {
        const html = await renderer.renderToString({
            title: "lagou",
            meta: `<meta name="description" content="lagou">`,
            url: req.url
        })
        // 方式一 设置响应头
        res.setHeader('Content-Type', 'text/html; charset=utf8')
        // 方式二 放入完整的 html 标签
        res.end(html)
    } catch (error) {
        res.status(500).end('Internal Server Error')
    }
}

// 服务端路由设置为 *，意味着所有的路由都会进入这里
server.get('*', isProd ? render : async (req, res) => {
    // 等待有了 Renderer 渲染器以后，调用 render 进行渲染
    await onReady
    render(req, res)
})

server.listen(3000, () => {
    console.log('server runing at port 3000.')
})
